<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!--收集表单数据:
			若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
			若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
			若: <input type="checkbox" />
				1.没有配置input的value属性,那么收集的就是checked（勾选or未勾选,是布尔值)
				2.配置input的value属性:
					(1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
					(2)v-model的初始值是数组，那么收集的的就是value组成的数组
			备注:v-model的三个修饰符:
					lazy:失去焦点再收集数据
					number:输入字符串转为有效的数字
					trim:输入首尾空格过滤 
		-->


		<div id="app">
			<form @submit.prevent="dmo">
				<!-- v-model.trim 去除前后空格 -->
				<p>账号：<input type="text" v-model.trim="account" /></p>
				<p>密码：<input type="text" v-model="password" /></p>
				<!-- v-model.number 转换数字类型 -->
				<p>年龄：<input type="number" v-model.number="age" /></p>
				<p>性别：
					<input type="radio" name="sex" v-model="sex" value="男" />男
					<input type="radio" name="sex" v-model="sex" value="女" />女
				</p>
				<p>爱好:
					<input type="checkbox" name="1" v-model="hobby" value="抽烟" />抽烟
					<input type="checkbox" name="1" v-model="hobby" value="跳舞" />跳舞
					<input type="checkbox" name="1" v-model="hobby" value="喝酒" />喝酒
					<input type="checkbox" name="1" v-model="hobby" value="烫头" />烫头
				</p>
				<p>所属校区：
					<select v-model="city">
						<option value="广州">广州</option>
						<option value="北京">北京</option>
						<option value="江西">江西</option>
					</select>
				</p>
				<p>其他信息：
					<!-- v-model.lazy  失去焦点触发 收集信息-->
					<textarea cols="30" rows="8" v-model.lazy="other">介绍一下自己</textarea>
				</p>
				<p><input type="checkbox" v-model="agree" />接受<a href="#">《用户协议》</a></p>
				<input type="submit" value="确定">
			</form>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						account: "",
						age: "",
						password: "",
						sex: "男",
						hobby: [],
						city: "北京",
						other: "",
						agree: false
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {
					dmo() {
						console.log(JSON.stringify(this._data))
					}
				},
				//计算属性 定义:要用的属性不存在，要通过已有属性计算得来
				computed: {},
				//监视属性 当被监视的属性变化时，回调函数自动调用
				watch: {}
			});
		</script>
	</body>
</html>
